
<!-- shopping.vue基本套壳模板 -->
<template>
<div class="bg-white">
    <h1 class="flex justify-center text-3xl font-bold mb-10 text-gray-500">商品管理</h1>
</div>
<div class="flex ml-2 mb-6">
    <button class="bg-blue-500  text-white font-bold py-2 px-4 rounded">新增商品</button>
</div>
<div class="ml-8 bg-white mr-3">
    <div class="flex justify-between items-center mb-4 shadow-sm" v-for="(item, index) in shopping":key="index">
        <div class="flex items-center"><i class="fa fa-check-circle text-green-500 mr-2"></i>商品名：{{item.spname}}</div>
        <div class="flex items-center"><i class="fa fa-dollar-sign text-yellow-500 mr-2"></i>单价：{{item.price}}</div>
        <div class="flex items-center"><i class="fa fa-sort-numeric-up text-blue-500 mr-2"></i>数量：{{item.count}}</div>
        <div class="flex items-center">
            <img :src="item.img" alt="" class="w-10 h-10 mr-2">
            <button class="bg-blue-500  text-white font-bold py-2 px-4 rounded mr-2" @click="deleteItem(index)">刪除</button>
            <button class="bg-blue-500  text-white font-bold py-2 px-4 rounded">修改</button>
        </div>
    </div>
</div>
</template>

<script setup>
import { ref } from 'vue'

const shoppingvalue = JSON.parse(localStorage.getItem('shopping')) 
const shopping = ref([
    {
                spname: "商品1",
                price: 100,  
                count: 10,
                img: "https://picsum.photos/200/300"
                
             },
                {
                    spname: "商品2",
                    img: "https://picsum.photos/200/400",
                    price: 200,
                    count: 20
                 
                },
                {
                    spname: "商品3",
                    price: 300,
                    count: 30,
                    img: "https://picsum.photos/200/200"
                       
                },
                {
                   spname: "商品4",
                   price: 400,
                   count: 40,
                   img: "https://picsum.photos/200/700"
                }
            ])

            localStorage.setItem('shopping', JSON.stringify(shoppingvalue))
/**
 * 删除商品信息
*/
function deleteItem(index) {
    shopping.value.splice(index, 1)
    localStorage.setItem('shopping', JSON.stringify(shopping.value))
}
</script>